<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Hugo 0.68.3 with theme Tranquilpeak 0.4.7-BETA">
<meta name="author" content="唐宋缘明卿">
<meta name="keywords" content=", development, next-gen">
<meta name="description" content="想必大家对于JWT也是耳熟能详了，但是具体如何实现，就让我们一起来看一下吧。">


<meta property="og:description" content="想必大家对于JWT也是耳熟能详了，但是具体如何实现，就让我们一起来看一下吧。">
<meta property="og:type" content="article">
<meta property="og:title" content="JWT完全攻略">
<meta name="twitter:title" content="JWT完全攻略">
<meta property="og:url" content="https://gaohaihang.gitee.io/ghhs_technology_blog/2017/08/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5/">
<meta property="twitter:url" content="https://gaohaihang.gitee.io/ghhs_technology_blog/2017/08/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5/">
<meta property="og:site_name" content="唐宋缘明卿的博客">
<meta property="og:description" content="想必大家对于JWT也是耳熟能详了，但是具体如何实现，就让我们一起来看一下吧。">
<meta name="twitter:description" content="想必大家对于JWT也是耳熟能详了，但是具体如何实现，就让我们一起来看一下吧。">
<meta property="og:locale" content="zh-cn">

  
    <meta property="article:published_time" content="2017-08-04T14:36:41">
  
  
    <meta property="article:modified_time" content="2017-08-04T14:36:41">
  
  
  
    
      <meta property="article:section" content="python">
    
      <meta property="article:section" content="django">
    
  
  
    
      <meta property="article:tag" content="JWT">
    
      <meta property="article:tag" content="token">
    
      <meta property="article:tag" content="验证">
    
      <meta property="article:tag" content="原理">
    
  


<meta name="twitter:card" content="summary">







  <meta property="og:image" content="//d1u9biwaxjngwg.cloudfront.net/video-integration-showcase/peak-140.jpg">
  <meta property="twitter:image" content="//d1u9biwaxjngwg.cloudfront.net/video-integration-showcase/peak-140.jpg">





  <meta property="og:image" content="http://img.qq22.com.cn/uploads/4134/gubtyqxfhz2.jpg?68513786">
  <meta property="twitter:image" content="http://img.qq22.com.cn/uploads/4134/gubtyqxfhz2.jpg?68513786">


    <title>JWT完全攻略</title>

    <link rel="icon" href="https://gaohaihang.gitee.io/ghhs_technology_blog/favicon.png">
    

    

    <link rel="canonical" href="https://gaohaihang.gitee.io/ghhs_technology_blog/2017/08/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5/">

    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.min.css" integrity="sha256-vuXZ9LGmmwtjqFX1F+EKin1ThZMub58gKULUyf0qECk=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-thumbs.min.css" integrity="sha256-SEa4XYAHihTcEP1f5gARTB2K26Uk8PsndQYHQC1f4jU=" crossorigin="anonymous" />
    
    
    <link rel="stylesheet" href="https://gaohaihang.gitee.io/ghhs_technology_blog/css/style-twzjdbqhmnnacqs0pwwdzcdbt8yhv8giawvjqjmyfoqnvazl0dalmnhdkvp7.min.css" />
    
    

    
      
    
    
  </head>

  <body>
    <div id="blog">
      <header id="header" data-behavior="5">
  <i id="btn-open-sidebar" class="fa fa-lg fa-bars"></i>
  <div class="header-title">
    <a class="header-title-link" href="https://gaohaihang.gitee.io/ghhs_technology_blog/">唐宋缘明卿的博客</a>
  </div>
  
    
      <a class="header-right-picture "
         href="https://gaohaihang.gitee.io/ghhs_technology_blog/#about">
    
    
    
      
        <img class="header-picture" src="http://img.qq22.com.cn/uploads/4134/gubtyqxfhz2.jpg?68513786" alt="作者的图片" />
      
    
    </a>
  
</header>

      <nav id="sidebar" data-behavior="5">
  <div class="sidebar-container">
    
      <div class="sidebar-profile">
        <a href="https://gaohaihang.gitee.io/ghhs_technology_blog/#about">
          <img class="sidebar-profile-picture" src="http://img.qq22.com.cn/uploads/4134/gubtyqxfhz2.jpg?68513786" alt="作者的图片" />
        </a>
        <h4 class="sidebar-profile-name">唐宋缘明卿</h4>
        
          <h5 class="sidebar-profile-bio">弱小的人，才习惯嘲讽与否定；内心强大的人，从不吝啬赞美与鼓励。</h5>
        
      </div>
    
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/">
    
      <i class="sidebar-button-icon fa fa-lg fa-home"></i>
      
      <span class="sidebar-button-desc">首页</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/categories">
    
      <i class="sidebar-button-icon fa fa-lg fa-bookmark"></i>
      
      <span class="sidebar-button-desc">分类</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/tags">
    
      <i class="sidebar-button-icon fa fa-lg fa-tags"></i>
      
      <span class="sidebar-button-desc">标签</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/archives">
    
      <i class="sidebar-button-icon fa fa-lg fa-archive"></i>
      
      <span class="sidebar-button-desc">归档</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/resume">
    
      <i class="sidebar-button-icon fa fa-address-card"></i>
      
      <span class="sidebar-button-desc">Resume</span>
    </a>
  </li>


    </ul>
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://github.com/ghh617415200" target="_blank" rel="noopener">
    
      <i class="sidebar-button-icon fa fa-lg fa-github"></i>
      
      <span class="sidebar-button-desc">GitHub</span>
    </a>
  </li>

  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://stackoverflow.com/users/13559927/ghh-cirs" target="_blank" rel="noopener">
    
      <i class="sidebar-button-icon fa fa-lg fa-stack-overflow"></i>
      
      <span class="sidebar-button-desc">Stack Overflow</span>
    </a>
  </li>


    </ul>
    <ul class="sidebar-buttons">
      
  <li class="sidebar-button">
    
      <a class="sidebar-button-link " href="https://gaohaihang.gitee.io/ghhs_technology_blog/index.xml">
    
      <i class="sidebar-button-icon fa fa-lg fa-rss"></i>
      
      <span class="sidebar-button-desc">Rss</span>
    </a>
  </li>


    </ul>
  </div>
</nav>

      

      <div id="main" data-behavior="5"
        class="
               hasCoverMetaIn
               ">
        <article class="post" itemscope itemType="http://schema.org/BlogPosting">
          
          
            <div class="post-header main-content-wrap text-left">
  
    <h1 class="post-title" itemprop="headline">
      JWT完全攻略
    </h1>
  
  
  <div class="postShorten-meta post-meta">
    
      <time itemprop="datePublished" datetime="2017-08-04T14:36:41&#43;08:00">
        
  八月 4, 2017

      </time>
    
    
  
  
    <span>发布在</span>
    
      <a class="category-link" href="https://gaohaihang.gitee.io/ghhs_technology_blog/categories/python">python</a>, 
    
      <a class="category-link" href="https://gaohaihang.gitee.io/ghhs_technology_blog/categories/django">django</a>
    
  

  </div>

</div>
          
          <div class="post-content markdown" itemprop="articleBody">
            <div class="main-content-wrap">
              <p>想必大家对于JWT也是耳熟能详了，但是具体如何实现，就让我们一起来看一下吧。</p>
<h3 id="一句话介绍jwt">一句话介绍JWT！</h3>
<p>通俗来讲，JWT 是一个含签名并携带用户相关信息的加密串，页面请求校验登录接口时，请求头中携带 JWT 串到后端服务，后端通过签名加密串匹配校验，保证信息未被篡改。校验通过则认为是可靠的请求，将正常返回数据。</p>
<h3 id="啥时候用jwt啊">啥时候用JWT啊</h3>
<ul>
<li>授权！基本上遇到单点登录问题，JWT就完了！毕竟用起来轻便、开销小，而且服务端无需记录用户状态，用的也是十分的广泛。</li>
<li>信息交换：因为JWT可以签名，例如使用公钥-私钥对儿，可以确定请求方是合法的，同时由于使用了负载计算签名，也可以验证内容是否被篡改。</li>
</ul>
<h3 id="jwt的组成部分">JWT的组成部分</h3>
<p>一个完整的JWT=头信息+有效载荷+签名这三部分组成，中间的加号换成<code>(.)</code>进行分割；</p>
<ol>
<li>header(头信息)：令牌类型[jwt]+散列算法（HMAC/RSASSA/RSASSA-PSS)</li>
</ol>
<pre><code>{
  'typ': 'JWT',
  'alg': 'HS256'
}
</code></pre><p>接着进行进行base64加密（该加密是可以对称解密的),就构成了第一部分.</p>
<pre><code>eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9
</code></pre><ol start="2">
<li>payload(有效载荷)的三部分:</li>
</ol>
<pre><code>1 ==&gt; 标准中注册的声明
2 ==&gt; 公共的声明
3 ==&gt; 私有的声明
</code></pre><p>标准中注册的声明 (建议但不强制使用) ：</p>
<ul>
<li>iss: jwt签发者</li>
<li>sub: jwt所面向的用户</li>
<li>aud: 接收jwt的一方</li>
<li>exp: jwt的过期时间，这个过期时间必须要大于签发时间</li>
<li>nbf: 定义在什么时间之前，该jwt都是不可用的.</li>
<li>iat: jwt的签发时间</li>
<li>jti: jwt的唯一身份标识，主要用来作为一次性token,从而回避重放攻击。</li>
</ul>
<p>公共的声明 ：
公共的声明可以添加任何的信息，一般添加用户的相关信息或其他业务需要的必要信息.但不建议添加敏感信息，因为该部分在客户端可解密.</p>
<p>私有的声明 ：
私有声明是提供者和消费者所共同定义的声明，一般不建议存放敏感信息，因为base64是对称解密的，意味着该部分信息可以归类为明文信息</p>
<p>定义一个payload：</p>
<pre><code>{
  &quot;sub&quot;: &quot;1234567890&quot;,
  &quot;name&quot;: &quot;John Doe&quot;,
  &quot;admin&quot;: true
}
加密后就得到了  
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9
</code></pre><p>也就是JWT的第二部分</p>
<ol start="3">
<li>signature(签名信息) 的三部分：</li>
</ol>
<pre><code>1 ==&gt; header (base64后的)
2 ==&gt; payload (base64后的)
3 ==&gt; secret
</code></pre><p>这个部分需要base64加密后的header和base64加密后的payload使用.连接组成的字符串，然后通过header中声明的加密方式进行加盐secret组合加密，然后就构成了jwt的第三部分。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-python" data-lang="python">encodedString <span style="color:#f92672">=</span> base64UrlEncode(header) <span style="color:#f92672">+</span> <span style="color:#e6db74">&#39;.&#39;</span> <span style="color:#f92672">+</span> base64UrlEncode(payload)
signature <span style="color:#f92672">=</span> HMACSHA256(encodedString, <span style="color:#e6db74">&#39;secret&#39;</span>);
<span style="color:#75715e">#TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ</span>
</code></pre></div><p>于是我们获得了一个最终的字符串（JWT完全体）
<code>eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ</code></p>
<h3 id="实际项目中的应用分析">实际项目中的应用分析</h3>
<p>首先，我们大致的看一下流程图<br>
<img src="https://gitee.com/gaohaihang/ghhs_technology_blog/raw/master/img/res/JWT%E6%B5%81%E7%A8%8B.jpg" alt="jwt-flow-chart"><br>
从流程图中呢，我们可以很清晰的看出JWT的基于TOKEN的鉴权机制。<br>
这个token必须要在每次请求时传递给服务端，它应该保存在请求头里， 另外，服务端要支持CORS(跨来源资源共享)策略，一般我们在服务端这么做就可以了Access-Control-Allow-Origin: *。</p>
<pre><code>用户使用用户名密码来请求服务器==&gt;
服务器进行验证用户的信息==&gt;
服务器通过验证发送给用户一个token==&gt;
客户端存储token，并在每次请求时附送上这个token值==&gt;
服务端验证token值，并返回数据
</code></pre><p>传统的session认证是每个用户经过我们的应用认证之后，我们的应用都要在服务端做一次记录，以方便用户下次请求的鉴别，通常而言session都是保存在内存中，而随着认证用户的增多，服务端的开销会明显增大。<br>
同时，在多台服务器共同工作时，为了减轻压力，可能会互相切换服务器，而只要用户信息不在这台服务器的时候，就需要再次进行验证，这样子用户便需要频繁的进行认证，体验极差。<br>
还有不得不防范的一点是，在传统的认证中，是基于cookie来进行用户识别的，如果cookie被截获，用户就会很容易遭到跨站请求伪造的攻击。</p>
<h3 id="总结一下">总结一下</h3>
<h4 id="优点">优点</h4>
<ul>
<li>因为json的通用性，所以JWT是可以进行跨语言支持的，而且实现方式简单，操作便捷，能够快速实现，像JAVA,JavaScript,NodeJS,PHP等很多语言都可以使用。</li>
<li>因为有了payload部分，所以JWT可以在自身存储一些其他业务逻辑所必要的非敏感信息。</li>
<li>便于传输，jwt的构成非常简单，字节占用很小，所以它是非常便于传输的。</li>
<li>它不需要在服务端保存会话信息, 所以它易于应用的扩展
安全相关。</li>
<li>由于服务端不存储用户状态信息，因此大用户量，对后台服务也不会造成压力。</li>
</ul>
<h4 id="缺点">缺点</h4>
<ul>
<li>跨域实现相对比较麻烦，安全性也有待探讨。</li>
<li>因为 JWT 令牌返回到页面中，可以使用 js 获取到，如果遇到 XSS 攻击令牌可能会被盗取，在 JWT 还没超时的情况下，就会被获取到敏感数据信息。（这一点跟cookie/session是一样的，获取了sessionID人家就能盗用你的身份）</li>
<li>关于注销和修改密码<br>
这一点上cookie/session是优势，因为人家只需要服务器清空session即可，但是因为JWT的无状态，虽然客户端删除了jwt，但由于jwt是由服务端计算而得来，还处在有效期内，就会造成一个假注销的情况，也就是说此时携带jwt还是可以访问你的系统。</li>
<li>续签问题<br>
在这一点上，cookie/session算是搬得一城。传统的 cookie 续签方案一般都是框架自带的，session 有效期 30 分钟，30 分钟内如果有访问，session 有效期被刷新至 30 分钟。而 jwt 本身的 payload 之中也有一个 exp 过期时间参数，来代表一个 jwt 的时效性，而 jwt 想延期这个 exp 就有点身不由己了，因为 payload 是参与签名的，一旦过期时间被修改，整个 jwt 串就变了，jwt的特性就是这样……</li>
</ul>
              
            </div>
          </div>
          <div id="post-footer" class="post-footer main-content-wrap">
            
              
                
                
                  <div class="post-footer-tags">
                    <span class="text-color-light text-small">标签</span><br/>
                    
  <a class="tag tag--primary tag--small" href="https://gaohaihang.gitee.io/ghhs_technology_blog/tags/jwt/">JWT</a>

  <a class="tag tag--primary tag--small" href="https://gaohaihang.gitee.io/ghhs_technology_blog/tags/token/">token</a>

  <a class="tag tag--primary tag--small" href="https://gaohaihang.gitee.io/ghhs_technology_blog/tags/%E9%AA%8C%E8%AF%81/">验证</a>

  <a class="tag tag--primary tag--small" href="https://gaohaihang.gitee.io/ghhs_technology_blog/tags/%E5%8E%9F%E7%90%86/">原理</a>

                  </div>
                
              
            
            <div class="post-actions-wrap">
  
      <nav >
        <ul class="post-actions post-action-nav">
          
            <li class="post-action">
              
                <a class="post-action-btn btn btn--disabled">
              
                  <i class="fa fa-angle-left"></i>
                  <span class="hide-xs hide-sm text-small icon-ml">下一篇</span>
                </a>
            </li>
            <li class="post-action">
              
                <a class="post-action-btn btn btn--default tooltip--top" href="https://gaohaihang.gitee.io/ghhs_technology_blog/2017/04/%E8%B8%A9%E8%BF%87%E7%9A%84%E5%9D%91%E6%B5%81%E8%BF%87%E7%9A%84%E6%B3%AA/" data-tooltip="踩过的坑，流过的泪">
              
                  <span class="hide-xs hide-sm text-small icon-mr">上一篇</span>
                  <i class="fa fa-angle-right"></i>
                </a>
            </li>
          
        </ul>
      </nav>
    <ul class="post-actions post-action-share" >
      
        <li class="post-action hide-lg hide-md hide-sm">
          <a class="post-action-btn btn btn--default btn-open-shareoptions" href="#btn-open-shareoptions">
            <i class="fa fa-share-alt"></i>
          </a>
        </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://www.facebook.com/sharer/sharer.php?u=https://gaohaihang.gitee.io/ghhs_technology_blog/2017/08/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5/">
              <i class="fa fa-facebook-official"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://twitter.com/intent/tweet?text=https://gaohaihang.gitee.io/ghhs_technology_blog/2017/08/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5/">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://plus.google.com/share?url=https://gaohaihang.gitee.io/ghhs_technology_blog/2017/08/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5/">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
        
      
      
        <li class="post-action">
          <a class="post-action-btn btn btn--default" href="#disqus_thread">
            <i class="fa fa-comment-o"></i>
          </a>
        </li>
      
      <li class="post-action">
        
          <a class="post-action-btn btn btn--default" href="#">
        
          <i class="fa fa-list"></i>
        </a>
      </li>
    </ul>
  
</div>

            
              
                <div id="disqus_thread">
  <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
              
            
          </div>
        </article>
        <footer id="footer" class="main-content-wrap">
  <span class="copyrights">
    &copy; 2020 唐宋缘明卿. All Rights Reserved
  </span>
</footer>

      </div>
      <div id="bottom-bar" class="post-bottom-bar" data-behavior="5">
        <div class="post-actions-wrap">
  
      <nav >
        <ul class="post-actions post-action-nav">
          
            <li class="post-action">
              
                <a class="post-action-btn btn btn--disabled">
              
                  <i class="fa fa-angle-left"></i>
                  <span class="hide-xs hide-sm text-small icon-ml">下一篇</span>
                </a>
            </li>
            <li class="post-action">
              
                <a class="post-action-btn btn btn--default tooltip--top" href="https://gaohaihang.gitee.io/ghhs_technology_blog/2017/04/%E8%B8%A9%E8%BF%87%E7%9A%84%E5%9D%91%E6%B5%81%E8%BF%87%E7%9A%84%E6%B3%AA/" data-tooltip="踩过的坑，流过的泪">
              
                  <span class="hide-xs hide-sm text-small icon-mr">上一篇</span>
                  <i class="fa fa-angle-right"></i>
                </a>
            </li>
          
        </ul>
      </nav>
    <ul class="post-actions post-action-share" >
      
        <li class="post-action hide-lg hide-md hide-sm">
          <a class="post-action-btn btn btn--default btn-open-shareoptions" href="#btn-open-shareoptions">
            <i class="fa fa-share-alt"></i>
          </a>
        </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://www.facebook.com/sharer/sharer.php?u=https://gaohaihang.gitee.io/ghhs_technology_blog/2017/08/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5/">
              <i class="fa fa-facebook-official"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://twitter.com/intent/tweet?text=https://gaohaihang.gitee.io/ghhs_technology_blog/2017/08/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5/">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
        
          <li class="post-action hide-xs">
            <a class="post-action-btn btn btn--default" target="new" href="https://plus.google.com/share?url=https://gaohaihang.gitee.io/ghhs_technology_blog/2017/08/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5/">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
        
      
      
        <li class="post-action">
          <a class="post-action-btn btn btn--default" href="#disqus_thread">
            <i class="fa fa-comment-o"></i>
          </a>
        </li>
      
      <li class="post-action">
        
          <a class="post-action-btn btn btn--default" href="#">
        
          <i class="fa fa-list"></i>
        </a>
      </li>
    </ul>
  
</div>

      </div>
      <div id="share-options-bar" class="share-options-bar" data-behavior="5">
  <i id="btn-close-shareoptions" class="fa fa-close"></i>
  <ul class="share-options">
    
      <li class="share-option">
        <a class="share-option-btn" target="new" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fgaohaihang.gitee.io%2Fghhs_technology_blog%2F2017%2F08%2Fjwt%25E5%25AE%258C%25E5%2585%25A8%25E6%2594%25BB%25E7%2595%25A5%2F">
          <i class="fa fa-facebook-official"></i><span>分享到 Facebook</span>
        </a>
      </li>
    
      <li class="share-option">
        <a class="share-option-btn" target="new" href="https://twitter.com/intent/tweet?text=https%3A%2F%2Fgaohaihang.gitee.io%2Fghhs_technology_blog%2F2017%2F08%2Fjwt%25E5%25AE%258C%25E5%2585%25A8%25E6%2594%25BB%25E7%2595%25A5%2F">
          <i class="fa fa-twitter"></i><span>分享到 Twitter</span>
        </a>
      </li>
    
      <li class="share-option">
        <a class="share-option-btn" target="new" href="https://plus.google.com/share?url=https%3A%2F%2Fgaohaihang.gitee.io%2Fghhs_technology_blog%2F2017%2F08%2Fjwt%25E5%25AE%258C%25E5%2585%25A8%25E6%2594%25BB%25E7%2595%25A5%2F">
          <i class="fa fa-google-plus"></i><span>分享到 Google&#43;</span>
        </a>
      </li>
    
  </ul>
</div>
<div id="share-options-mask" class="share-options-mask"></div>
    </div>
    
    <div id="about">
  <div id="about-card">
    <div id="about-btn-close">
      <i class="fa fa-remove"></i>
    </div>
    
      <img id="about-card-picture" src="http://img.qq22.com.cn/uploads/4134/gubtyqxfhz2.jpg?68513786" alt="作者的图片" />
    
    <h4 id="about-card-name">唐宋缘明卿</h4>
    
      <div id="about-card-bio">弱小的人，才习惯嘲讽与否定；内心强大的人，从不吝啬赞美与鼓励。</div>
    
    
      <div id="about-card-job">
        <i class="fa fa-briefcase"></i>
        <br/>
        python全栈工程师
      </div>
    
    
      <div id="about-card-location">
        <i class="fa fa-map-marker"></i>
        <br/>
        中国 北京
      </div>
    
  </div>
</div>

    

    
  
    
      <div id="cover" style="background-image:url('https://gaohaihang.gitee.io/ghhs_technology_blog/images/cover.jpg');"></div>
    
  


    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.7/js/jquery.fancybox.min.js" integrity="sha256-GEAnjcTqVP+vBp3SSc8bEDQqvWAZMiHyUSIorrWwH50=" crossorigin="anonymous"></script>


<script src="https://gaohaihang.gitee.io/ghhs_technology_blog/js/script-pcw6v3xilnxydl1vddzazdverrnn9ctynvnxgwho987mfyqkuylcb1nlt.min.js"></script>


<script lang="javascript">
window.onload = updateMinWidth;
window.onresize = updateMinWidth;
document.getElementById("sidebar").addEventListener("transitionend", updateMinWidth);
function updateMinWidth() {
  var sidebar = document.getElementById("sidebar");
  var main = document.getElementById("main");
  main.style.minWidth = "";
  var w1 = getComputedStyle(main).getPropertyValue("min-width");
  var w2 = getComputedStyle(sidebar).getPropertyValue("width");
  var w3 = getComputedStyle(sidebar).getPropertyValue("left");
  main.style.minWidth = `calc(${w1} - ${w2} - ${w3})`;
}
</script>

<script>
$(document).ready(function() {
  hljs.configure({ classPrefix: '', useBR: false });
  $('pre.code-highlight > code, pre > code').each(function(i, block) {
    if (!$(this).hasClass('codeblock')) {
      $(this).addClass('codeblock');
    }
    hljs.highlightBlock(block);
  });
});
</script>


  
    
      <script>
        var disqus_config = function () {
          this.page.url = 'https:\/\/gaohaihang.gitee.io\/ghhs_technology_blog\/2017\/08\/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5\/';
          
            this.page.identifier = '\/2017\/08\/jwt%E5%AE%8C%E5%85%A8%E6%94%BB%E7%95%A5\/'
          
        };
        (function() {
          
          
          if (window.location.hostname == "localhost") {
            return;
          }
          var d = document, s = d.createElement('script');
          var disqus_shortname = 'hugo-tranquilpeak-theme';
          s.src = '//' + disqus_shortname + '.disqus.com/embed.js';

          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
        })();
      </script>
    
  




    
  </body>
</html>

